<template>
  <section class="my-commission">
    <div class="top- flex-col flex-around flex-middle">
      <div class="unit">佣金余额（元）</div>
      <div class="price">{{info.commission}}</div>
      <div
        class="btn"
        @click="handleTips"
      >提现</div>
    </div>
    <div
      class="item flex flex-between flex-middle"
      v-for="item in info.commissionDtls"
      :key="item"
    >
      <div class="flex">
        <img
          :src="item.fromHeadImgUrl"
          alt=""
          srcset=""
        >
        <div class="flex-col flex-between">
          <div class="title">{{item.fromMember}}</div>
          <div class="desc">{{item.createTime}}</div>
        </div>
      </div>
      <div
        class="price"
        v-if="item.commissionType == 1"
      >
        +{{item.commissionChange}}
      </div>
      <div
        class="price"
        v-else-if="item.commissionType == 2"
      >
        -{{item.commissionChange}}
      </div>
      <div
        class="price"
        v-if="item.commissionType == 3"
      >
        +{{item.commissionChange}}
      </div>
      <div
        class="price"
        v-if="item.commissionType == 4"
      >
        -{{item.commissionChange}}
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data ()  {
    return {
      info: ''
    };
  },
  filters:{
    formatDate:this.formatDate
  },
  onShow ()  {
    this.$api.getCommissionDtl().then(res =>    {
      this.info = res.data;
      this.info.commissionDtls = res.data.commissionDtls.map(item=>{
        item.createTime = this.formatDate(item.createTime,"Y-D-M h:s");
        return item;
      })
      // this.$set(this.info.taskOrder,'taskDate',this.formatDate(res.data.taskOrder.taskDate))
    })
  },
  methods: {
    routerTo (url)    {
      wx.navigateTo({ url });
    },
    handleTips() {
      wx.showToast({
        title: '功能开发中，敬请期待',
        icon: 'none',
        duration: 1500,
        mask: false,
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-commission {
  .top- {
    height: 160px;
    background: rgba(59, 184, 253, 1);
    .unit {
      font-size: 12px;
      font-family: PingFang;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 13px;
    }
    .price {
      font-size: 30px;
      font-family: DIN;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 13px;
    }
    .btn {
      width: 90px;
      height: 28px;
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 14px;
      font-size: 15px;
      font-family: PingFang;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 28px;
      text-align: center;
    }
  }
  .item {
    margin: 15px 0;
    background: white;
    padding: 20px 15px;
    img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      border-radius: 100%;
    }
    .title {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 13px;
    }
    .price {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 156, 0, 1);
      line-height: 13px;
    }
    .desc {
      font-size: 12px;
      font-family: DIN;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
      line-height: 13px;
    }
  }
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
</style>